import React, {Component} from 'react';
import {Popup, Tab,Button,Group,Field ,NumberPicker,SelectField, TextField,NoticeBar } from 'saltui';
import Number from  './Number'

/**
 *  <CheckIn room   buttonName >
 */
export default class CheckIn extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
      prices :[]
    };
    this.state.room = this.props.room
    this.state.buttonName = this.props.buttonName;

  }

  onChange = (id,value) =>{
    console.info(value);
  }

  handleTextChange = (id,value) =>{
    console.info(value);
  }


  render() {
    let that = this;
    return <Button type="secondary"  size="small" onClick={() => {
      Popup.show(<div className="demo-popup-container">     <Group.List >
          <Field label="1010" tip={<div>45.5$</div>}>

             <Field label="入住时间">  <Number value={1} id = {0} onChange={that.onChange} ></Number> </Field>


            <div>
             <TextField
            label="姓名"
            placeholder="请输入"
            value=""
            onChange={(value) => { t.handleTextChange('t1', value); }}
          />
          </div>
           <div>
             <TextField
            label="ID"
            placeholder="请输入"
            value=""
            onChange={(value) => { t.handleTextChange('t1', value); }}
          />
          </div>
          </Field>
       <Field label="1010" tip={<div>45.5$</div>}>

             <Field label="入住时间">  <Number value={1} id = {0} onChange={that.onChange} ></Number> </Field>


            <div>
             <TextField
            label="姓名"
            placeholder="请输入"
            value=""
            onChange={(value) => { t.handleTextChange('t1', value); }}
          />
          </div>
           <div>
             <TextField
            label="ID"
            placeholder="请输入"
            value=""
            onChange={(value) => { t.handleTextChange('t1', value); }}
          />
          </div>
          </Field>
        </Group.List>
<div className="notice-div">
  <NoticeBar className="noticeMessage" message={"totol:$4445.555"} closable={false} type="warning" />
</div>
        <div className="demo-line">
          <Button type="secondary"  size="small"  >提交</Button>
          <Button type="secondary"  size="small"  >取消</Button>
        </div></div>, {
        animationType: 'slide-down',
      });
    }} >{this.state.buttonName}</Button>
  }
}
